<template>
	<view class="success" v-if="status">
		<rui-icons icon="success" color="var(--color)" size="120"></rui-icons>
		<view class="success_name">
			新名称保存成功
		</view>
	</view>
	<view class="enter" v-else>
		<view class="enter_finger">
			<rui-finger :current="current"></rui-finger>
		</view>
		<view class="enter_status" v-if="number > 10">
			您的指纹已达上限
		</view>
		<view class="enter_body" v-else>
			<view class="enter_body_name">
				{{current ? '指纹采集中':message}}...
			</view>
			<view class="enter_body_progress">
				{{current}}/10
			</view>
			<view class="enter_body_tips">
				{{tips[current]}}
			</view>

			<view class="enter_body_form" v-if="enter_status">
				<input class="enter_body_form_input" v-model="name" placeholder="请输入新名称" />
				<rui-button text="确定" @click="submit"></rui-button>
			</view>
		</view>
	</view>


</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		addFinger,
		getFingerKey,
		editFinger
	} from "@/common/api.js"
	import ble from "@/util/ble"
	import {
		createBuffer
	} from "@/util/common"
	import {
		productStore
	} from "@/store";

	let product = productStore()

	let current = ref(0);
	let number = ref(9)
	let status = ref(false)
	let name = ref("")
	let form = ref({
		name: "未命名",
		user_product_id: 0,
		keys: ''
	});

	let create_id = 0;


	let tips = [
		'请将手指轻按压指纹传感器，再松开',
		'开始录入指纹',
		'继续按压一次，后松开',
		'很好，同一个手指换一个角度按压后松开',
		'再换一个角度按压后松开',
		'加油，这个角度录好啦，继续下一个角度按压一次',
		'继续按压，确保每个角度都录上',
		'再换一个角度按压一次',
		'很好，同一个手指再换一个角度按压一下',
		'就差最后一个啦，再按一下',
		'真棒！录入指纹成功，快起个名字吧',
	]
	let message = ref("指纹同步中")

	let timeout = "";
	let id = "";
	let enter_status = ref(false)
	let err_tips = ref("")
	let done_status = 0

	onUnload(() => {
		current.value = 0;
		done_status = 0
		status.value = false;
		clearTimeout(timeout)
		ble.watch = function() {}
		ble.error = function() {}
	})
	onLoad(() => {
		form.value.user_product_id = id = product.getInfo.id;
		setFinger();
		
		//监听数据
		ble.watch = (event, d) => {
			if (event === 'state') {
				if (!d.connected) {
					uni.showToast({
						title: "设备已断开",
						icon: "error"
					})
					
					setTimeout(_ => {
						uni.navigateBack({
							delta: 2
						})
					}, 2000)
					
				}
			}
			console.log(event, d)
			if (event == 'notify') {
				//超时退出
				if (d.command == 17) {
					uni.showModal({
						title: "超时提醒",
						content: "录入指纹已超时请重新进入操作",
						success(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					})
				}
				if (d.data[0] == '00' && d.data[1] == '01') {
					overtime()
				}
				if (d.data[0] == '00' && d.data[1] == '02') {
					// current.value++
					current.value = parseInt(d.data[2], 16)
					//清除倒计时
					clearTimeout(timeout)
				}
				if(d.data[1] == '05') {
					done_status = 1;
					clearTimeout(timeout)
				}
				if (d.data[1] == '06' && done_status == 1) {
					clearTimeout(timeout)
					current.value = 10
					//提前保存数据库
					addFinger(form.value).then(res => {
						enter_status.value = true;
						create_id = res.data.id
						let fingerprint = product.getFingerprint;
						fingerprint = Number(fingerprint) + 1
						product.setFingerprint(fingerprint)
					})
					
				}
			}
		}
		ble.error = (event, d) => {
			console.log(event, d)
		}
	})

	const setFinger = () => {
		getFingerKey({
			user_product_id: id
		}).then(r => {
			number.value = r.data.key;
			console.log('获取KEY',  r)
			setTimeout(_ => {
				let k = form.value.keys = r.data.key;
				ble.send(createBuffer(11, 1, k == 10 ? 'a' : k))
			}, 500)
		})
	}

	const overtime = () => {
		// timeout = setTimeout(() => {
		// 	uni.showModal({
		// 		title: "超时提醒",
		// 		content: "录入指纹已超时请重新进入操作",
		// 		success(res) {
		// 			if (res.confirm) {
		// 				uni.navigateBack({
		// 					delta: 1
		// 				})
		// 			}
		// 		}
		// 	})
		// }, 15000)
	}

	const submit = () => {
		editFinger({
			id: create_id,
			name: name.value
		}).then(() => {
			status.value = true;
			setTimeout(_ => {
				uni.navigateBack({
					delta: 1
				})
			}, 2000)
		})
	}
</script>

<style lang="scss" scoped>
	.success {
		// margin: 30% auto;
		margin-top: 25%;
		text-align: center;

		&_name {
			margin-top: 20rpx;
		}
	}

	.enter {
		text-align: center;

		&_finger {
			margin: 100rpx 0;
		}

		&_status {
			font-size: 32rpx;
			font-weight: bold;
		}

		&_body {
			&_form {
				margin-top: 100rpx;

				&_input {
					padding: 30rpx 0;
					font-size: 32rpx;
					text-align: center;
					background: #fff;
					border-radius: 20rpx;
					margin: 40rpx 20rpx;
				}



			}


			&_name {
				font-size: 32rpx;
				font-weight: bold;
			}

			&_progress {
				margin-top: 100rpx;
				font-size: 50rpx;
			}

			&_tips {
				font-size: 24rpx;
				color: #999;
			}
		}

	}
</style>